<template>
  <div class="container1">
    <label for="dataset-select">Select Dataset:</label>
    <select id="dataset-select" v-model="selectedDataset">
      <option value="DM">DouBan D-M Dataset</option>
      <option value="AM">DouBan A-M Dataset</option>
    </select>
    <button @click="confirmSelection">Confirm</button>
  </div>
  <div class="container2" v-if="selectedDataset === 'DM'" >
    <h2>D-M Dataset</h2>
    <p>Number of D nodes: {{ datasetInfo.D }}</p>
    <p>Number of M nodes: {{ datasetInfo.M }}</p>
    <p>Number of edges: {{ datasetInfo.edges }}</p>
  </div>
  
  <div class="container3" v-if="selectedDataset === 'AM'">
    <h2>A-M Dataset</h2>
    <p>Number of A nodes: {{ datasetInfo.A }}</p>
    <p>Number of M nodes: {{ datasetInfo.M }}</p>
    <p>Number of edges: {{ datasetInfo.edges }}</p>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { eventBus } from '../eventBus'; // 引入事件总线
import { useStore } from 'vuex';
const store = useStore();

// Hypothetical dataset information
const dmData = ref({
  D: 425,
  M: 3416,
  edges: 1223
});

const amData = ref({
  A: 4682,
  M: 3416,
  edges: 12449
});

// Reactive data to store the selected dataset
const selectedDataset = ref('DM'); // Set the default to 'DM'
store.dispatch("selectedDataset", selectedDataset.value);

// Display corresponding data based on the selected dataset
const datasetInfo = ref({
  D: 0,
  M: 0,
  A: 0,
  edges: 0
});

watch(selectedDataset, (newVal) => {
  if (newVal === 'DM') {
    datasetInfo.value = { ...dmData.value };
  } else if (newVal === 'AM') {
    datasetInfo.value = { ...amData.value };
  }
}, { immediate: true }); // The immediate option will trigger the watcher on mount

// 确认选择并发送事件
const confirmSelection = () => {
  // eventBus.emit('dataset-selected', selectedDataset.value);
  store.dispatch("selectedDataset", selectedDataset.value);
};
</script>

<style>
/* Add some basic styling */
h1, h2 {
  color: #333;
}
.container1,
.container2,
.container3{
  padding-left: 1%;
}
</style>